<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/tongji_ykhx.css">
</head>
<body>
    <div class="box">
        <!--头部-->
        <div class="title-box">
            <div class="title-img">
                <h3>光山县旅游产业监控中心</h3>
            </div>
            <ul class="link-box">
                <li class="active"><a href="index.html">人流热力图</a></li>
                <li><a href="chanye_jq.html">行业运行监测</a></li>
                <li><a href="industryDevelopment.html">行业发展监测</a></li>
                <li><a href="video.html">第三方数据</a></li>
            </ul>
            <div class="title-left">
                <span>光山县</span>
                <span id="weather">小雨转晴</span>
                <span id="temperature">32/23℃</span>
                <span id="windPower">东风</span>
            </div>
        </div>
        <!--主体-->
        <div class="main-box">
            <!--导航-->
            <div class="nav-box">
                <ul>
                    <li class="active">
                        <a href="#">
                            <div>
                                <img src="./assets/images/icon-index.png">
                                <img src="./assets/images/icon-index-active.png">
                            </div>
                            <p>大数据人流热力图</p>
                        </a>
                    </li>
                    <li>
                        <a href="./chanye_jq.html">
                            <div>
                                <img src="./assets/images/icon-analysis.png">
                                <img src="./assets/images/icon-analysis-active.png">
                            </div>
                            <p>行业运行监测及统计</p>
                        </a>
                    </li>
                    <li>
                        <a href="./industryDevelopment.html">
                            <div>
                                <img src="./assets/images/icon-operation.png">
                                <img src="./assets/images/icon-operation-active.png">
                            </div>
                            <p>行业发展监测及统计</p>
                        </a>
                    </li>
                    <li>
                        <a href="./lvyoujia_qx.html">
                            <div>
                                <img src="./assets/images/icon-activity.png">
                                <img src="./assets/images/icon-activity-active.png">
                            </div>
                            <p>第三方数据处理和呈现</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--数据内容-->
            <div class="content-box flex-column">
                <div class="content-nav" style="margin-bottom: 0">
                    <h4 class="title-bg">
                        大数据人流热力图
                    </h4>
                </div>
                <div class="content-main flex-row flex1">

                    <div class="content-left flex2">
                        <div class="map-box flex2">
                            <div class="index-map" id="index-map"></div>
                            <div class="map-info">
                                <h2>客流排行</h2>
                                <div>
                                    <p>大苏山国家森林公园</p>
                                    <span>32100</span>
                                </div>
                                <div>
                                    <p>司马光故居</p>
                                    <span>620</span>
                                </div>
                                <div>
                                    <p>官渡河古渡口</p>
                                    <span>5860</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex1 bg-1 content-center-bg time-box bounceInUp animated">
                            <div class="content-title">客流趋势分析</div>
                            <div class="flex1 bg-main-1" id="index_3">
                            </div>
                        </div>
                    </div>
                    <div class="content-right flex2">
                        <div class="flex1">
                            <div class="portrait-box flex1">
                                <div class="bg-1 flex1 animated slideInDown delay-1">
                                    <div class="content-title">性别占比</div>
                                    <div class="bg-main-1" id="portrait_2"></div>
                                </div>
                                <div class="bg-1 flex1 animated slideInDown delay-1">
                                    <div class="content-title">年龄分布</div>
                                    <div class="bg-main-1" id="portrait_3"></div>
                                </div>
                            </div>
                            <div class="portrait-box flex1">
                                <div class="bg-1 flex1 animated slideInRight delay-2">
                                    <div class="content-title">停留时长</div>
                                    <div class="bg-main-1" id="portrait_4"></div>
                                </div>
                                <div class="bg-1 flex1 animated slideInRight delay-2">
                                    <div class="content-title">游客出行方式</div>
                                    <div class="bg-main-1" id="portrait_5"></div>
                                </div>
                            </div>

                            <div class="bg-1 flex1 animated slideInUp delay-3">
                                <div class="content-title">客源地</div>
                                <div class="bg-main-1 place-box">
                                    <ul>
                                        <li class="active">客源省TOP10</li>
                                        <li>客源城市TOP10</li>
                                    </ul>
                                    <div id="portrait_6" class="flex1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/js/public.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=c8e5a90c0f22f143055214a84727eed8" type="text/javascript"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>-->
<!--<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>-->
<script>
    $(document).ready(function(){
        let zoom = 12; //地图的初始化级别，及放大比例
        let map = new T.Map("index-map");
        map.centerAndZoom(new T.LngLat(114.925922,32.01425), zoom);
        function getMap() {
            let administrative = new T.AdministrativeDivision(); //创建一个获取行政区划的实例
            let config = {
                needSubInfo: false, //是否需要下一级信息
                needAll: false, //是否需要所有子节点。
                needPolygon: true,//是否需要行政区划范围。
                needPre: true,//是否需要上一级所有信息。
                searchType: 1,//查询类型。0表示根据code查询，1表示根据名称查询。
                searchWord: '光山县'//查询行政区划的名称。
            };
            administrative.search(config, searchResult);//方法：根据检索词发起检索，searchResult：回调参数
            function searchResult(result) {
                console.log(result)
                if (result.getStatus() == 100) {
                    let data = result.getData();
                    showMsg(data);
                } else {
                    result.getMsg();
                }
            }

        }
        function  positionBtn() {
            // this.map.clearOverLays();   //清理地图上的覆盖物
            let lc = new T.LocalCity();  //创建一个获取本地城市位置的实例
            lc.location(function(e) {  //利用ip进行定位
                // alert(e.cityName);

                let marker = new T.Marker(e.lnglat);  //e.lnglat，标注点的地理坐标
                map.addOverLay(marker);  //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
                getMap(); //创建地图对象

                marker.addEventListener("dragend", overlay_style); //添加事件监听函数。
                marker.enableDragging(); //开启标注拖拽功能

                function overlay_style(e) {
                    let p = e.target;
                    alert(
                        "该地区经纬度是：" + p.getLngLat().lng + "," + p.getLngLat().lat
                    );
                }
            });
        }
        positionBtn()
        function showMsg(data) {
            console.log(data)
            for (let i = 0; i < data.length; i++) {
                console.log(data[i].points)
                //解释上级行政区划
                if (data[i].parents) {
                    console.log(222222)
                    let upLevel = "";
                    if (data[i].parents.country) {
                        upLevel += data[i].parents.country.name;
                    }
                    if (data[i].parents.province) {
                        upLevel += data[i].parents.province.name;
                    }
                }

                if (data[i].points) {
                    console.log(2220222)
                    //绘制行政区划
                    polygon(data[i].points);
                }

                //解释下级行政区划
                if (data[i].child) {
                    showMsg(data[i].child);
                    console.log(data[i].child.points);
                    if (data[i].child.points) {
                        //绘制行政区划
                        polygon(data[i].child.points);
                    }
                }
            }
        }
        function polygon(points) {
            console.log(22)
            let pointsArr = [];
            for (let i = 0; i < points.length; i++) {
                let regionLngLats = [];
                let regionArr = points[i].region.split(",");
                for (let m = 0; m < regionArr.length; m++) {
                    let lnglatArr = regionArr[m].split(" ");
                    let lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                    regionLngLats.push(lnglat);
                    pointsArr.push(lnglat);
                }
                //创建面对象,样式
                let polygon = new T.Polygon(regionLngLats, {
                    color: "#fd737a",
                    weight: 3,
                    opacity: 1,
                    fillColor: "#FFFFFF", //填充颜色。
                    fillOpacity: 0.3 //填充透明度
                });
                //向地图上添加行政区划面
                map.addOverLay(polygon);
            }
            //显示最佳比例尺
            map.setViewport(pointsArr);
            alert(
                "当前地图中心点：" +
                map.getCenter().getLng() +
                "," +
                map.getCenter().getLat()
            );
        }
    });
</script>
<!--<script>-->
    <!--// 百度地图API功能-->
    <!--var map = new BMap.Map("index-map", {minZoom:7,maxZoom:15}, { enableMapClick: false });-->
    <!--var point = new BMap.Point(114.925922,32.01425);    // 初始化地图,设置中心点坐标-->
    <!--map.centerAndZoom(point, 14);-->
    <!--map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放-->
    <!--var blist = [];-->
    <!--var districtLoading = 0;-->


    <!--function getBoundary(){-->
        <!--//百度地图获取行政区域的对象-->
        <!--var bdary = new BMap.Boundary();-->

        <!--bdary.get("光山县", function (rs) {       //获取行政区域-->

            <!--//以下是获取行政区域的回调-->
            <!--// map.clearOverlays();        //清除地图覆盖物-->

            <!--//需要绘制边界多边形的点集合-->
            <!--var paths = new Array();-->
            <!--//行政区域点集合，以;分隔的-->
            <!--var pointliststr = rs.boundaries[0];-->
            <!--//3获取点数组，push到 paths中-->
            <!--var pointlist = pointliststr.split(";");-->
            <!--var firstPoint;-->
            <!--for(var i =0;i<pointlist.length;i++)-->
            <!--{-->

                <!--var tempPt = pointlist[i].split(',');-->
                <!--var newPoint = new BMap.Point(tempPt[0],tempPt[1]);-->
                <!--if(i==0){ firstPoint= newPoint;};-->

                <!--paths.push(newPoint);-->
            <!--}-->
            <!--//第一点再推进去，形成一个闭环，构造了多边形的内环-->
            <!--paths.push(firstPoint);-->

            <!--//自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）-->
            <!--paths.push(new BMap.Point(170.672126, 39.623555));-->
            <!--paths.push(new BMap.Point(170.672126, 81.291804));-->
            <!--paths.push(new BMap.Point(105.913641, 81.291804));-->
            <!--paths.push(new BMap.Point(-169.604276,  81.291804));-->
            <!--paths.push(new BMap.Point(-169.604276, 39.623555));-->
            <!--paths.push(new BMap.Point(-169.604276, -68.045308));-->
            <!--paths.push(new BMap.Point(105.913641, -68.045308));-->
            <!--paths.push(new BMap.Point(170.672126, -68.045308));-->
            <!--paths.push(new BMap.Point(170.672126, 39.623555));-->

            <!--//4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。-->
            <!--var ply1 = new BMap.Polygon("",-->
                <!--{ fillColor: "#062031", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0.9}); //建立多边形覆盖物-->
            <!--//将之前形成的点set到多边形对象中-->
            <!--ply1.setPath(paths);-->
            <!--//在地图上添加第一个多边形-->
            <!--map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层-->


            <!--//5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线-->
            <!--var ply = new BMap.Polygon(rs.boundaries[0],-->
                <!--{ strokeWeight: 2, strokeColor: "#000",fillColor: "transparent" });-->
            <!--map.addOverlay(ply);-->
            <!--map.setViewport(ply.getPath());    //调整视野-->
        <!--});-->
    <!--}-->
  <!--getBoundary()-->

  <!--var points =[-->
    <!--{"lng":114.818352,"lat":31.872514,"count":50},-->
    <!--{"lng":114.82022,"lat":31.871043,"count":81},-->
    <!--{"lng":114.785582,"lat":31.872269,"count":15},-->
    <!--{"lng":114.774227,"lat":31.879874,"count":40},-->
    <!--{"lng":114.780551,"lat":31.881223,"count":100},-->
    <!--{"lng":114.815333,"lat":31.878892,"count":6},-->
    <!--{"lng":114.818352,"lat":31.87325,"count":98},-->
    <!--{"lng":114.836893,"lat":31.883308,"count":80},-->
    <!--{"lng":114.834593,"lat":31.882081,"count":50},-->
    <!--{"lng":114.835312,"lat":31.882204,"count":70},-->
    <!--{"lng":114.833731,"lat":31.883676,"count":50},-->
    <!--{"lng":114.850547,"lat":31.918009,"count":30},-->
    <!--{"lng":114.851409,"lat":31.916783,"count":81},-->
    <!--{"lng":114.848822,"lat":31.922423,"count":15},-->
    <!--{"lng":114.854284,"lat":31.917764,"count":40},-->
    <!--{"lng":114.801967,"lat":31.923158,"count":100},-->
    <!--{"lng":114.801967,"lat":31.923158,"count":6},-->
    <!--{"lng":114.803979,"lat":31.92512,"count":98},-->
    <!--{"lng":114.85644,"lat":31.959315,"count":80},-->
    <!--{"lng":114.858596,"lat":31.958825,"count":50},-->
    <!--{"lng":114.857877,"lat":31.959315,"count":70},-->
    <!--{"lng":114.912382,"lat":32.01422,"count":50},-->
    <!--{"lng":114.925922,"lat":32.01425,"count":65},-->
    <!--{"lng":114.916889,"lat":31.989219,"count":55},-->
    <!--{"lng":114.93384,"lat":31.989666,"count":85},-->
    <!--{"lng":114.903082,"lat":31.989329,"count":35},-->
   <!--];-->
   <!--if(!isSupportCanvas()){-->
    	<!--alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')-->
    <!--}-->
    <!--heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});-->
	<!--map.addOverlay(heatmapOverlay);-->
    <!--heatmapOverlay.setDataSet({data:points,max:100});-->
    <!--function setGradient(){-->
     	<!--/*格式如下所示:-->
		<!--{-->
	  		<!--0:'rgb(102, 255, 0)',-->
	 	 	<!--.5:'rgb(255, 170, 0)',-->
		  	<!--1:'rgb(255, 0, 0)'-->
		<!--}*/-->
     	<!--var gradient = {};-->
     	<!--var colors = document.querySelectorAll("input[type='color']");-->
     	<!--colors = [].slice.call(colors,0);-->
     	<!--colors.forEach(function(ele){-->
			<!--gradient[ele.getAttribute("data-key")] = ele.value;-->
     	<!--});-->
        <!--heatmapOverlay.setOptions({"gradient":gradient});-->
    <!--}-->
	<!--//判断浏览区是否支持canvas-->
    <!--function isSupportCanvas(){-->
        <!--var elem = document.createElement('canvas');-->
        <!--return !!(elem.getContext && elem.getContext('2d'));-->
    <!--}-->
<!--</script>-->
</html>
